import { setUserInfoAsync } from "@/store/slice/baseSlice.js";
import React, { useEffect, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import timg from "../assets/images/timg.jpg";
import "./HomeHead.less";

const HomeHead = (props) => {
  // 计算时间中的月和日
  let { today } = props;
  let time = useMemo(() => {
    let [, month, day] = today.match(/^\d{4}(\d{2})(\d{2})$/);
    let arr = [
      "",
      "一",
      "二",
      "三",
      "四",
      "五",
      "六",
      "七",
      "八",
      "九",
      "十",
      "十一",
      "十二",
    ];

    return {
      // 当做索引来取对应的值
      month: arr[+month] + "月",
      day,
    };
  }, [today]);
  const navigate = useNavigate();

  const { userInfo } = useSelector((state) => state.base);
  const dispatch = useDispatch();
  useEffect(() => {
    if (!userInfo) {
      dispatch(setUserInfoAsync());
    }
  }, []);
  return (
    <div className='home-head-box'>
      <div className='info'>
        <div className='time'>
          <span>{time.day}</span>
          <span>{time.month}</span>
        </div>
        <h2 className='title'>知乎日报</h2>
      </div>
      <div
        className='picture'
        onClick={() => {
          navigate("/personal");
        }}
      >
        <img src={userInfo ? userInfo.pic : timg} alt='' />
      </div>
    </div>
  );
};

export default HomeHead;
